<!doctype html>
<html ondragstart="return false">
 <head>
     <meta charset="UTF-8">
     <meta name="Keywords" content="关键字">
     <meta name="Description" content="描述">
     <title>星空2</title>
	 <style>
		*{
			margin:0;
			padding:0;
		}
		#thecanvas{
			background-color:#000;
		}
	 </style>
 </head>
 <body>
	<canvas id = 'thecanvas'></canvas>
	<script>
		var can = document.getElementById('thecanvas');
		var canvas = can.getContext('2d'); 
		var H = window.innerHeight,W = window.innerWidth;
		window.onload = resize;
		window.onresize = resize;
		resize();
		function resize(){
			H = can.height =  window.innerHeight;
			W = can.width = window.innerWidth;
		}
		class Star
		{
			constructor(data){
				this.r = 10;
				this.x = 0;
				this.y = 0;
				this.x3d = 0;
				this.y3d = 0;
				this.z3d = 800;
				this.dx = 0;
				this.dy = 0;
				this.dz = 0;
				this.vx = 0;
				this.vy = 0;
				this.vz = 0;
				this.ax = 0;
				this.ay = 0;
				this.az = 0;
				this.f = 0;
				this.Hx = 0;
				this.Wx = 0;
				this.fn = 100;
				this.ScaleX = 1;
				this.SCaleY = 1;
				this.FillStyle = 'rgb(255,255,255)';
				Object.assign(this,data)
			}
			CreateStar(canvas){
				this.CalculatePosition();
				canvas.save();
				canvas.translate(this.Wx,this.Hx);
				canvas.scale(this.ScaleX,this.ScaleY);
				canvas.beginPath();
				var color = canvas.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
				color.addColorStop(0,'rgb(255,255,255)');
				color.addColorStop(0.3,'rgb(255,255,255)');
				color.addColorStop(1,this.FillStyle);
				canvas.fillStyle = color;
				canvas.arc(this.x,this.y,this.r,0,Math.PI*2);
				canvas.fill();
				canvas.closePath();
				canvas.restore();
			}
			CalculatePosition(){
				this.ScaleX = this.ScaleY = this.fn/(this.fn - this.z3d);
				this.x = (this.x3d + this.dx)*this.ScaleX;
				this.y = (this.y3d + this.dy)*this.ScaleY;
			}
		}
		var balls = [],num = 800,Fn = 200,Dx = 0,Dy = 0,Dz = 0,lastDx = 0,lastDy = 0;
		function Rp(arr){
			var [a,b] = arr;
			return Math.random()*(b-a)+a;
		}
		function Init(){
			for(var i = 0 ; i < num ;i++){
				var color = `rgb(${Math.floor(Rp([0,255]))},${Math.floor(Rp([0,255]))},${Math.floor(Rp([0,255]))})`;
				balls.push(new Star({
					Hx:H/2,
					Wx:W/2,
					r:Rp([0.01,3]),
					x3d:Rp([-W/2,W/2]),
					y3d:Rp([-H/2,H/2]),
					z3d:Rp([-Fn,400]),
					vx:Rp([-0.2,0.2]),
					vy:Rp([-0.2,0.2]),
					vz:Rp([-0.1,0.1]),
					//ax:Rp([-0.01,0.01]),
					//ay:Rp([-0.01,0.01]),
					//az:Rp([-0.01,0]),
					fn:Fn,
					FillStyle:color
				}))
			}
		}
		function StarMove(){
			canvas.clearRect(0,0,W,H);
			for(var i = 0; i < num ;i++){ 
				balls[i].x3d += balls[i].vx;
				balls[i].vx += balls[i].ax;
				balls[i].y3d += balls[i].vy;
				balls[i].vy += balls[i].ay;
				balls[i].z3d += balls[i].vz;
				balls[i].vz += balls[i].az;
				if(balls[i].z3d<-Fn||balls[i].z3d>400||balls[i].y3d<-H||balls[i].y3d>H||balls[i].x3d<-W||balls[i].x3d>W){
					balls[i].x3d=Rp([-W*2/3,W*2/3]);
					balls[i].y3d=Rp([-H*2/3,H*2/3]);
					balls[i].z3d=Rp([0,400]);
					balls[i].vx=Rp([-0.2,0.2]);
					balls[i].vy=Rp([-0.2,0.2]);
					balls[i].vz=Rp([-0.1,0.1]);
				}
				
			
				balls[i].CreateStar(canvas);
			}
		}
		Init();
		document.addEventListener('mousedown',function(e){
			var startX = e.clientX;
			var startY = e.clientY;
			document.addEventListener('mousemove',move);
			function move(e){
				Dx = e.clientX - startX + lastDx;
				Dy = e.clientY - startY + lastDy;
				for(var i = 0;i<num;i++){
					balls[i].dx = Dx;
					balls[i].dy = Dy;
				}
				
			}
			document.addEventListener('mouseup',function(){
				lastDx = Dx;
				lastDy = Dy;
				document.removeEventListener('mousemove',move);
				document.removeEventListener('mouseup',arguments.callee);
			});
		});
		(function move(){
			window.requestAnimationFrame(move);
		    StarMove();
		})()
	</script>
 </body>
</html>